<template>
    <div class="review-result-container">
        <div style="display: flex;flex-direction: row;justify-content: space-between;">
            <div>
                <ReviewResultExpertButton :currentTaskInfo="props.currentTaskInfo" />
                &nbsp;
                <el-button type="primary" :loading="getMarkLoading" text bg @click="handleGenMarkDocxReport">
                    <i class="fa-solid fa-file-pen"></i> &nbsp; 导出标注文档
                </el-button>
                &nbsp;
                <el-button type="primary" :loading="getMarkLoading" text bg @click="handleGenMarkDocxReport">
                    <i class="fa-solid fa-check-to-slot"></i> &nbsp; 导出审核结果
                </el-button>
            </div>
            <div>
                <el-checkbox-group v-model="checkList" @change="handleFilterChange">
                    <el-checkbox
                        v-for="item in availableCheckboxOptions"
                        :key="item.value"
                        :label="item.value" >
                        {{ item.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div>
            <div style="margin-top:20px;">

                <div v-if="checkResultList.length == 0 || filteredResults.length == 0">
                    <el-empty description="审核结果为空，文档未进行审核">
                      <el-button type="primary" text bg size="large" @click="handleGenDocxReport" icon="Plus">返回审核</el-button>
                    </el-empty>
                </div>
 
                <div v-if="checkResultList.length > 0">
                    <el-scrollbar class="scrollable-area" style="border:0px !important">
                        <el-collapse v-model="activeNames" accordion>
                            <el-collapse-item
                                v-for="(item, index) in filteredResults"
                                :name="item.id"
                                :key="index"
                                :class="'item-alert-' + item.riskLevel">
                                <template #title>
                                    <div class="check-result-box" style="display: flex;gap: 5px;align-items: center;width: 100%;line-height: 1rem;">
                                        <span style="min-width: 30px;">
                                            {{ index + 1 }}
                                        </span>
                                        <span style="flex: 1;">
                                            {{ item.ruleName}}
                                        </span>
                                        <el-tag :type="getTagType(item)" effect="dark">
                                            {{ item.auditResultCount }}
                                        </el-tag>
                                    </div>
                                </template>
                                <div v-if="item.auditResultCount > 0" style="padding: 10px;">
                                    <div v-for="(result, resultIndex) in item.auditResults" :key="resultIndex" class="result-item">
                                        <div class="result-header" @click="result.showDetails = !result.showDetails">
                                            <el-icon :size="16" style="margin-right: 8px;">
                                                <ArrowRight v-if="!result.showDetails" />
                                                <ArrowDown v-else />
                                            </el-icon>
                                            <strong>{{ result.modificationReason }}</strong>
                                            <el-tag :type="getTagType(item)" effect="dark" style="margin-left: 10px;">
                                                {{ result.riskLevel === 'high' ? '高危' : result.riskLevel === 'medium' ? '中危' : '低危' }}
                                            </el-tag>
                                        </div>

                                        <div v-show="result.showDetails" class="result-details">
                                            <div class="detail-section">
                                                <b>原文内容:</b>
                                                <p>{{ result.originalContent }}</p>
                                            </div>
                                            <div class="detail-section">
                                                <b>建议内容:</b>
                                                <p>{{ result.suggestedContent }}</p>
                                            </div>

                                            <div class="action-buttons">

                                                <div class="action-buttons">
                                                    <el-button type="primary" size="small" text bg @click.stop="handlePointTo(result)">
                                                        <i class="fa-solid fa-map-marker-alt"></i>&nbsp;定位
                                                    </el-button> 
                                                    <el-button type="primary" size="small" text bg @click.stop="handlePointToPrev(result)">
                                                        <i class="fa-solid fa-chevron-left"></i>&nbsp;上一个
                                                    </el-button> 
                                                    <el-button type="primary" size="small" text bg @click.stop="handlePointToNext(result)">
                                                        <i class="fa-solid fa-chevron-right"></i>&nbsp;下一个
                                                    </el-button> 
                                                    <el-button type="danger" size="small" text bg @click.stop="handlePointToReplace(result)">
                                                        <i class="fa-solid fa-exchange"></i>&nbsp;替换
                                                    </el-button>
                                                    <el-button type="warning" size="small" text bg @click.stop="handlePointToIgnore(result)">
                                                        <i class="fa-solid fa-circle-xmark"></i>&nbsp;忽略
                                                    </el-button>
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div v-else style="padding: 10px; color: #999;">
                                    未发现问题
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-scrollbar>

                    <div class="review-checklist-button-section">

                        <el-button :disabled="props.currentTaskInfo.resultGenStatus != 'success'" 
                                style="width:49%" 
                                type="primary" 
                                size="large" 
                                @click="handleUpdateDocumentContent">
                            <i class="fa-solid fa-floppy-disk"></i> 保存修改后的文档
                        </el-button>
            
                        <el-button :disabled="props.currentTaskInfo.resultGenStatus != 'success'" 
                                style="width:49%" 
                                type="warning" 
                                size="large" 
                                @click="handleDownloadDocument">
                            <i class="fa-solid fa-download"></i> 下载文档
                        </el-button>
                    </div>

                </div>
            </div>
        </div>

        
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

import ReviewResultExpertButton from "./components/ReviewResultExpert.vue"
 
import { useRoute } from 'vue-router';
import { getCurrentInstance } from 'vue';
import { saveAs } from 'file-saver'
import { ElMessage } from 'element-plus'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import {
    getSceneResultList,
    downloadMarkDocx,
    getAuditResultByRuleId
} from '@/api/base/im/scene/documentReview';

import {
    genDocxReport,
    getPreviewReportDocx,
    getPreviewUrl
} from '@/api/base/im/scene/documentReviewSceneInfo';

const emit = defineEmits([
    'handleStepClick', 
    'searchAndReplace',
    'handleUpdateDocumentContent',
    'genSingleChapterContent', 
    'closeGeneratorStatus',
    'generatorStatus'])

const props = defineProps({
  currentSceneInfo: {
    type: Object, 
    required: false 
  },
  currentTaskInfo: {
    type: Object, 
    required: false 
  }
})  

const { proxy } = getCurrentInstance();
const route = useRoute();
const currentSceneInfo = ref(null);
const sceneId = ref(route.query.sceneId)
const taskId = ref(route.query.taskId)

const activeNames = ref([]); // 手风琴当前激活项
const getMarkLoading = ref(false);

const currentStoreId = ref(null)

const checkboxOptions = [
    { "label": "高风险", "value": "high" },
    { "label": "中风险", "value": "medium" },
    { "label": "低风险", "value": "low" },
    { "label": "通过", "value": "passed" }
];

// 默认选中所有选项
const checkList = ref(checkboxOptions.map(opt => opt.value));
const checkResultList = ref([]);

// 计算可用的复选框选项（只显示有结果的类型）
const availableCheckboxOptions = computed(() => {
    return checkboxOptions.filter(opt =>
        checkResultList.value.some(item =>
            item.riskLevel === opt.value && item.auditResultCount > 0
        )
    );
});

// 计算过滤后的结果
const filteredResults = computed(() => { 
    return checkResultList.value.filter(item =>
       checkList.value.includes(item.riskLevel) && item.auditResultCount > 0
    );
});

// 处理过滤变化
const handleFilterChange = () => {
    // 可以在这里添加额外的逻辑
    console.log('当前选中的过滤条件:', checkList.value);
};


// 获取标签颜色
const getTagType = (item) => {
    switch (item.riskLevel) {
        case 'low':
            return 'info';
        case 'medium':
            return 'warning';
        case 'high':
            return 'danger';
        default:
            return 'success';
    }
}

// 获取场景数据的方法需要稍作修改
const handleGetScene = async () => {
    try {
        const res = await getSceneResultList(sceneId.value, taskId.value);
        currentSceneInfo.value = res.data;
        checkResultList.value = currentSceneInfo.value.reviewListDtos;

        // 为每个规则项加载审计结果
        for (const item of checkResultList.value) {
            console.log('taskId.id = ' + taskId.id)
            const resultRes = await getAuditResultByRuleId(item.id, sceneId.value , taskId.value);
            item.auditResults = resultRes.data.map(r => ({
                ...r,
                showDetails: false
            }));
        }

        // 更新复选框选项，只保留有结果的类型
        checkList.value = checkList.value.filter(value =>
            availableCheckboxOptions.value.some(opt => opt.value === value)
        );
    } catch (error) {
        console.error('Error fetching scene data:', error);
    }
};


const downloadWordDocument = () => {
    getPreviewUrl(currentStoreId.value).then(res => {
        window.open(res.data);
    })
}

// 忽略问题
const handlePointToIgnore = (item) => {
    ElMessage.warning('功能在测试中');
    console.log('忽略问题:', item);
}

// 更新文档内容
const handleUpdateDocumentContent = () => {
    emit("handleUpdateDocumentContent")
}

// 文档下载
const handleDownloadDocument = () => {
    emit("downloadWordDocument")
}

// 导出标注文档
const handleGenMarkDocxReport = () => {
    ElMessage.warning('功能在测试中');
    return ; 

    // getMarkLoading.value = true;
    // try {
    //     downloadMarkDocx(sceneId.value, taskId.value).then(res => {
    //         proxy.download(res.data, {}, `${currentSceneInfo.value.documentName}_${new Date().getTime()}.docx`)
    //         getMarkLoading.value = false;
    //     }).catch(error => {
    //         getMarkLoading.value = false;
    //     })
    // } catch (error) {
    //     console.error('Error:', error);
    //     ElMessage.error('下载失败');
    //     getMarkLoading.value = false;
    // }
}

// 定位
const handlePointTo = (item) => { 
    console.log('定位到:', item); 
    emit("searchAndReplace" , item.originalContent);
}

//  上一个点
const handlePointToPrev = (item) => { 
    ElMessage.warning('功能在测试中');
    console.log('定位到:', item); 
}

// 下一个点
const handlePointToNext = (item) => { 
    ElMessage.warning('功能在测试中');
    console.log('定位到:', item); 
}

const handlePointToReplace = (item) => { 
    console.log('定位到:', item); 
    emit("searchAndReplace" , item.originalContent , item.suggestedContent);
} 

onMounted(() => {
    handleGetScene();
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/document-review.scss';

.review-result-container {
    margin-top: 20px;
}

:deep(.el-collapse) {
    border: none;
}

:deep(.el-collapse-item__header) {
    padding: 10px;
    background: #f5f5f5;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    border: none;

    &:hover {
        background: #e5e5e5;
    }
}

:deep(.el-collapse-item__content) {
    padding-bottom: 0;
}

.result-item {
    margin-bottom: 15px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    overflow: hidden;

    .result-header {
        padding: 10px 15px;
        background: #fafafa;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
            background: #f5f5f5;
        }
    }

    .result-details {
        padding: 15px;
        background: #f9f9f9;

        .detail-section {
            margin-bottom: 10px;

            b {
                display: block;
                margin-bottom: 5px;
            }

            p {
                margin: 0;
                padding: 8px;
                background: white;
                border-radius: 4px;
                border: 1px solid #eee;
            }
        }

        .action-buttons {
            text-align: right;
            margin-top: 10px;
        }
    }
}


// 风险等级样式
.item-alert-high {
    :deep(.el-collapse-item__header) {
        border-left: 3px solid #f56c6c;
        border-bottom: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
    }
}

.item-alert-medium {
    :deep(.el-collapse-item__header) {
        border-left: 3px solid #e6a23c;
        border-bottom: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
    }
}

.item-alert-low {
    :deep(.el-collapse-item__header) {
        border-left: 3px solid #909399;
        border-bottom: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
    }
}

.item-alert-passed {
    :deep(.el-collapse-item__header) {
        border-left: 3px solid #67c23a;
        border-bottom: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
    }
}

.review-checklist-button-section{
    margin-top: 20px;
}

.scrollable-area{
    height: calc(-260px + 100vh);
    padding-right: 0px;
    border-bottom: 1px solid rgb(230, 230, 230);
    border-top: 1px solid rgb(230, 230, 230);
    border-radius: 5px;
}
</style>